const host = 'http://s1.zzaisx.top:3000'

// 打开另外一新增界面
function btnAdd() {
    console.log('新增');
    location.href = './addOrEdit.html'
}
function btnEdit(id) {
    console.log('编辑');
    location.href = './addOrEdit.html?id=' + id
}
async function btnFilter() {
    console.log('过滤');
    /*
        1. 拿到数据
        2. 向后端发请求
        3. 处理后端返回的响应
    */
    let keyword = $('input[name=keyword]').val()
    // console.log(keyword);
    // axios.get(`${host}/blogs?keyword=${keyword}`).then((res) => {
    //     // 处理后端返回的响应
    //     console.log(res);

    // }).cath()


    let res = await axios.get(`${host}/blogs?keyword=${keyword}`)
    // console.log(res)
    // 处理后端返回的响应

    let blogs = res.data.data;
    // 此处的处理是：清除所有的数据行，再将后端返回的数据形成一行一行插入到对应的dom节点
    $('tr[class^=blog]').remove();
    blogs.forEach(item => {
        let html = `
                        <tr class="blog${item.id}">
                                <td>${item.id}</td>
                                <td>${item.title}</td>
                                <td>${item.author}</td>
                                <td>
                                    <input type="button" value="编辑" onclick=btnEdit(${item.id})>
                                    <input type="button" value="删除" onclick=btnDel(${item.id})>
                                </td>
                            </tr>
                        `
        $('tbody').append(html)



    })



}
function btnDel(id) {
    console.log('删除');
    /*
        1. 拿到数据
        2. 向后端发请求
        3. 处理后端返回的响应
    */
    if (confirm('确认删除吗？')) {
        axios.delete(`${host}/blogs/${id}`).then((res) => {
            // console.log(res);
            let data = res.data;
            if (data.code === 1000) {
                // 删除成功
                let tr = document.querySelector(`.blog${id}`)
                tr.remove()
            } else {
                // 删除不成功
                confirm(`${data.msg}`)
            }

        })
    }

}
function btnSave() {
    // console.log('保存888');
    /*
        1.拿数据
        2.带着数据发请求
        3.处理返回的响应
    */
    // 使用jQuery拿到数据
    let id = new URLSearchParams(location.search).get('id') || 0

    let title = $('input[name=title]').val();
    let author = $('input[name=author]').val();
    // 数据检验工作是必须的
    title = title.trim()
    author = author.trim()
    let obj = {
        title, author
    }

    console.log(obj);

    if (id > 0) {
        // 第二步，请求修改
        axios.put(`${host}/blogs/${id}`, obj).then((res) => {
            // 处理返回的各应数据
            // console.log(res);
            if (res.data.code === 1000) {
                location.href = './index.html'
            } else {
                confirm(res.data.msg)
            }


        })
    } else {
        // 第二步，请求新增
        axios.post(`${host}/blogs`, obj).then((res) => {
            // 处理返回的各应数据
            // console.log(res);
            if (res.data.code === 1000) {
                location.href = './index.html'
            } else {
                confirm(res.data.msg)
            }


        })
    }





}
function btnCancel() {
    // console.log('取消');
    location.href = './index.html'
}
/*
    用户需求：我就是想这个页面能自动加载数据
    产品经理加工后的需求：我想列表页dom元素加载完成以后（事件），自动向后端发请求，请求到数据后，自动渲染到列表页
   

*/


